<template>
  <div class="homeView">
    <div class="content">
    <div class="left">
      <div class="left_top">
        <img src="../assets/arcoDesign-english-fill 1 Copy 1@1x.png" alt="" class="left_top_img">
        <div class="left_top_content">要背单词APP</div>
      </div>
      <div class="left_btm">
        <img src="../assets/logo_1.png" alt="" class="left_btm_img">
        <div class="left_btm_content">要背单词，让背单词变得更容易~！</div>
      </div>
    </div>
    <div class="right">
      <div class="title">
        <img src="../assets/arcoDesign-english-fill 1 Copy 1@1x.png" alt="" class="title_img">
        <div class="title_content">要背单词APP</div>
      </div>
      <div class="content_title">
        管理员登录
      </div>
      <div class="username_box">
        <img src="../assets/user@1x.png" alt="" class="username_box_img">
        <el-input v-model="username" placeholder="请输入账号" class="user_input"></el-input>
      </div>
      <div class="password_box">
        <img src="../assets/password@1x.png" alt="" class="password_box_img">
        <el-input v-model="password" placeholder="请输入密码" class="password_input"></el-input>
      </div>
      <div class="confirm_button_box">
        <button class="confirm_button" @click="login()">登录</button>
      </div>
      
    </div>
    </div>
    <div class="buttom"><ButtomBox/></div>
  </div>
</template>
 
<script>
// import { examFsxb,getHome } from "@/api/api";
import ButtomBox from '../components/ButtomBox.vue'
 
export default {
  name: 'Home',
  components:{
    ButtomBox
  },
  data() {
    return {
        username:"",
        password:""
    }
  },
  created(){
    
  },
  methods:{
    login(){
      this.$router.push(
        {
          name:'Manager'
        }
      )
    }
  }
 
}
</script>
<style>
.confirm_button_box{
  text-align: center;
    margin-top: 6vh;
}
.confirm_button{
  width: 25vw;
  height: 5vh;
  line-height: 5vh;
  text-align: center;
  border: none;
}
.confirm_button{
  color: #fff;
  background-color: #304313;
}
.username_box{
  margin-left:4vw ;
  display: flex;
  margin-top: 7vh;
  width: 21vw;
  height: 40px;
  line-height: 40px;
}
.password_box{
  margin-left: 4vw;
  margin-top: 5vh;
  width: 21vw;
  display: flex;
   height: 40px;
  line-height: 40px;
}
.password_box_img{
  width: 3vw;
  height: 3vw;
  margin-right: 2vh;
}
.username_box_img{
  width: 3vw;
  height: 3vw;
  margin-right: 2vh;
}
.content_title{
  color: #304313;
  font-size: 35px;
  font-weight: bold;
  margin-top: 1vh;
  text-align: center;
}
.title{
  margin-top: 1vh;
  margin-left: 2vw;
  display: flex;
  align-items: center;
}
.title_img{
  width: 4vw;
  height: 4vw;
}
.title_content{
  font-size: 20px;
  margin-left: 1vw;
}
*{
	margin: 0;
	padding: 0;
}
.right{
  width: 30vw;
  height: 36.85vw;
  background-color: #fff;
  margin-left: 2vw;
}
.left_top{
  background-color: #FCFCFC;
  display: flex;
  width: 22vw;
  height: 6vw;
  margin-left: 10vw;
  align-items: center;
}
.left_btm{
  background-color: #fff;
  width: 35vw;
  height: 30vw;
  margin-left: 10vw;
  align-items: center;
  margin-top: 2vh;
}
.left_top_content{
  color: #304313;
  font-size: 30px;
  margin-left: 1vw;
}
.left_top_img{
  width: 6vw;
  height: 6vw;
  margin-left: 1vw;
}
.left_btm_img{
  widows: 20vw;
  height: 20vw;
  margin-left: 5vw;
}
.left_btm_content{
  color: #304313;
  font-size: 30px;
  margin-left: 3vw;
}
.homeView{
  background-color: #F7F7F7;
}
.content{
  height: 85vh;
  width: 100vw;
  padding-top: 10vh;
  background-color: #F7F7F7;
  display: flex;
}
</style>